<template>
  <!-- 图片上传 -->
  <div id="mu-image">
    <template v-if="previewType == false && fileList.length > 0">
      <template v-if="accept == 'video'">
        <div class="miv-box">
          <div v-for="item in fileList" :key="item.url" class="mivb-i">
            <video :src="item.url" class="mivbi-v" controls="controls">您的浏览器不支持video标签</video>
            <div class="mivbi-del" @click="delImgM(item)"><i class="el-icon-circle-close del-icon" /></div>
          </div>
        </div>
      </template>
    </template>
    <!-- :before-delete="beforeDelete" -->
    <van-uploader v-model="fileList" :max-count="maxCount" :accept="acceptT" :after-read="afterRead" :before-read="beforeRead" :multiple="multiple" :deletable="true" preview-size="102px" :preview-image="previewType">
      <template v-if="mySlot == true">
        <slot />
      </template>
      <template v-else>
        <div class="upload_box">
          <span class="ub_tip">+</span>
          <span class="ub_msg">{{ uploadMsg }}</span>
        </div>
      </template>
    </van-uploader>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */
import { reqUpload, requestDel } from '@/api/editImg.js'
import { vCheckIsImg } from '@/assets/js/validate.js'
import { vCheckFileType, vCheckIsVedio } from '@/assets/js/validate.js'
export default {
  name: 'Uploadbutton',
  props: {
    // ''  代表直接获取值 url 代表上传接口获取值
    fileType: {
      type: String,
      default: 'file'
    },
    uploadMsg: {
      type: String,
      default: '上传文件'
    },
    uploadObj: {
      type: Object,
      default: function() {
        return {}
      }
    },
    // 传序号时，type必传
    index: {
      type: Number,
      default: 0
    },
    actionUrl: {
      type: String,
      default: ''
    },
    // 当页面有多个文件上传时 根据type 获取对应父组件上传的index
    type: {
      type: String,
      default: ''
    },
    defaultImg: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: true
    },
    //  video “任何视频文件”  image // 任何图片文件
    accept: {
      type: String,
      default: '.'
    },
    maxCount: {
      type: Number,
      default: 50
    },
    mySlot: {
      type: Boolean,
      default: false // true 表示使用自定义的上传图片
    },
    previewImage: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  computed: {
    tmpObj() {
      return {
        type: this.type,
        index: this.index
      }
    },
    previewType() {
      let myType = false
      if (this.previewImage == false) {
        return false
      }
      if (this.accept == 'image') {
        myType = true
      } else if (this.accept == 'video') {
        myType = false
      }
      return myType
    },
    acceptT() {
      let iType = '.'
      if (this.accept == 'video') {
        iType = 'video/*'
      } else if (this.accept == 'image') {
        iType = 'image/*'
      } else if (this.accept == 'audio') {
        iType = 'audio/*'
      } else {
        iType = this.accept
      }
      return iType
    }
  },
  watch: {
    defaultImg(v, o) {
      if (this.defaultImg && this.defaultImg.length > 0) {
        this.fileList = this.formImg(this.defaultImg)
      }
    }
  },
  created() {
    if (this.defaultImg && this.defaultImg.length > 0) {
      this.fileList = this.formImg(this.defaultImg)
    }
  },
  methods: {
    vCheckIsImg,
    vCheckFileType, // 校验上传图片文件
    vCheckIsVedio,
    beforeRead(file) {
      let flag = this.vCheckFileType(file)
      if (!flag) {
        this.$message({
          type: 'error',
          message: '上传文件名不能包含特殊字符，如",",请修改后重新上传'
        })
      }
      if (Array.isArray(file)) {
        file.forEach(v => {
          if (this.accept == 'image' && !this.vCheckIsImg(v.name)) {
            this.$message({
              type: 'error',
              message: '请上传jpg、png、jpeg、gif、tif格式图片'
            })
            flag = false
          }
          if (this.accept == 'video' && !this.vCheckIsVedio(v.name)) {
            this.$message({
              type: 'error',
              message: '请上传mp4格式视频'
            })
            flag = false
          }
        })
      } else {
        if (this.accept == 'image' && !this.vCheckIsImg(file.name)) {
          this.$message({
            type: 'error',
            message: '请上传jpg、png、jpeg、gif、tif格式图片'
          })
          flag = false
        }
        if (this.accept == 'video' && !this.vCheckIsVedio(file.name)) {
          this.$message({
            type: 'error',
            message: '请上传mp4格式视频'
          })
          flag = false
        }
      }
      if (file.size > 10485760) {
        this.$message({
          type: 'error',
          message: '上传文件不能超过10M，请压缩后上传'
        })
        flag = false
      }
      return flag
    },
    afterRead(file) {
      if (this.fileType == 'url') {
        const tmpPro = reqUpload(file)
        tmpPro.then(res => {
          this.$emit('getImgParam', { imgArr: res, operate: 'add', ...this.tmpObj })
        })
      } else {
        let arr = []
        if (Array.isArray(file)) {
          arr = file
        } else {
          arr.push(file)
        }
        this.$emit('getImgParam', { file: arr, operate: 'add', ...this.tmpObj })
      }
    },
    // beforeDelete(file, fileObj) {
    //   let flag = false
    //   if (file && file.url) {
    //     flag = true
    //     requestDel(file.url)
    //     this.$emit('getImgParam', { fileType: 'url', delIndex: fileObj.index, operate: 'del', ...this.tmpObj })
    //   } else {
    //     flag = true
    //     this.$emit('getImgParam', { fileType: 'file', delIndex: fileObj.index, operate: 'del', ...this.tmpObj })
    //   }
    //   return flag
    // },
    async delImgM(item) {
      await this.requestDel(item.url)
    },
    // 返回图片name 和url
    formImg(arr) {
      let data = []
      if (arr.length > 0 && this.fileType == 'url') {
        arr.forEach(v => {
          if (v) {
            // let name = this.getName(v)
            data.push({ url: v.url })
          }
        })
      } else {
        data = this.defaultImg
      }
      return data
    },
    // 获取文件名称
    getName(data) {
      const arr = data.split('/')
      const str = arr[arr.length - 1]
      return str
    },
    reParentM() {
      this.$emit('getImgParam', { ...this.reParam })
    }
  }
}
</script>

<style lang="scss">
#mu-image {
  display: flex;
  flex-wrap: wrap;
  .miv-box {
    display: flex;
    flex-wrap: wrap;
    .mivb-i {
      width: 300px;
      height: 150px;
      margin-right: 5px;
      margin-bottom: 5px;
      position: relative;
      .mivbi-v {
        height: 100%;
        width: 100%;
      }
      .mivbi-del {
        position: absolute;
        top: -18px;
        right: -8px;
      }
      .del-icon {
        font-size: 18px;
        font-weight: 700;
        color: #fe9400;
        cursor: pointer;
        &:hover {
          border-radius: 10px;
          background-color: #fe9400;
          color: #fff;
        }
      }
    }
  }
  .upload_box {
    border: 1px dashed #e4e4e4;
    color: #999999;
    width: 116px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    line-height: initial;
    .ub_tip {
      margin-top: -18px;
      font-size: 42px;
      font-weight: 700;
    }
    .ub_msg {
      font-size: 12px;
    }
  }
}
</style>
